<template>
  <div>
    <table-form :disabled="disabled" @next="step2Ctrl" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">
          <div>请添加看房计划和推荐租客</div>
          <i
            v-if="isEdit && detailRes.step <= 3"
            class="edit-icon"
            @click="isDisabled = true"
          />
        </h2>
      </template>
      <div class="addBntLease">
        <p
          :class="isEdit && !isDisabled ? 'gray_line' : ''"
          @click="openDialog(objplan)"
        >
          添加计划
        </p>
        <p
          :class="isEdit && !isDisabled ? 'gray_line' : ''"
          @click="openDialog(objtenants)"
        >
          推荐租客
        </p>
        <p
          :class="isEdit && !isDisabled ? 'gray_line' : ''"
          @click="openDialog(objInSpection)"
        >
          看房结果
        </p>
      </div>
      <div class="form-body">
        <ul class="ulLeaseBnt">
          <li v-for="(item, index) in recommendHistoryList" :key="index">
            <div v-if="item.type === 0" style="width: 85%">
              <div class="plan_box">
                <div class="div_lookTime">
                  <p>看房计划</p>
                </div>
                <div>
                  <p>
                    <span>{{ dateFormat2(item.viewDate) }}</span>
                    <span v-show="item.planStatus == 0">(已取消)</span>
                  </p>
                </div>
              </div>
              <div class="line line_dfn">
                <dfn
                  :class="
                    item.planStatus == 0 ||
                    item.viewDate < new Date().getTime() - 3600000 * 24
                      ? 'gray'
                      : ''
                  "
                  @click="cancelPlan(item)"
                  >取消</dfn
                >
              </div>
            </div>

            <div v-if="item.type === 2" class="div_Result">
              <div class="left">
                <p>看房结果</p>
              </div>
              <div class="right">
                <p>
                  <i>{{ item.viewRemark }}</i>
                </p>
                <dfn
                  v-for="(it, i) in getFileList(item.viewFilePath)"
                  :key="i"
                  class=""
                  ><a :href="item.viewFilePath.split(',')[i]" target="_blank">
                    {{ it }}
                  </a></dfn
                >
              </div>
            </div>

            <div v-if="item.type === 1" class="status-box">
              <div class="left">
                <p>推荐租客</p>
                <p>{{ statusTxt[item.status] }}</p>
              </div>
              <div class="right">
                <p>
                  <i
                    >租金 ${{ item.rent }}/周<i class="space"></i>租期{{
                      item.leaseTerm
                    }}个月<i class="space"></i>起租日为
                    {{ dateFormat2(item.beginDate) }}</i
                  >
                  <i v-for="(it, i) in item.recommendRenterList" :key="i"
                    >租客{{ numTxt[i] }}：{{ it.name }}<i class="space"></i
                    >{{ genderTxt[it.gender] }}士<i class="space"></i>
                    {{ it.age }}岁<i class="space"></i> {{ it.country }}/{{
                      it.work
                    }}<i class="space"></i> 年薪${{ it.income }}
                  </i>
                  <i>{{ item.remark }}</i>
                </p>
                <dfn v-for="(it, i) in getFileList(item.filePath)" :key="i"
                  ><a
                    class="limit-text"
                    :href="item.filePath.split(',')[i]"
                    target="_blank"
                  >
                    {{ it }}
                  </a></dfn
                >
                <div v-if="item.status == 0" class="line plan_box">
                  <dfn @click="leaseStep2OwnerAgree(item.id)">业主同意</dfn>
                  <dfn @click="leaseStep2OwnerRefused(item.id)">业主拒绝</dfn>
                  <dfn @click="leaseStep2RenterCancel(item.id)">租客取消</dfn>
                </div>
                <div v-if="item.status == 2" class="line plan_box">
                  <dfn @click="leaseStep2RenterSecondConfirm(item.id)"
                    >租客二次确认</dfn
                  >
                  <dfn @click="leaseStep2OwnerCancel(item.id)">业主取消</dfn>
                  <dfn @click="leaseStep2RenterCancel(item.id)">租客取消</dfn>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isDisabled"
            type="primary"
            :disabled="disabled"
            @click="saveEdit"
            >保存</el-button
          >
        </div>
      </template>
    </table-form>
    <!--添加计划-->
    <myModal
      :obj="objplan"
      :disabled="viewDateDisabled"
      @save="addPlan"
      @close="clearForm"
    >
      <el-form
        v-if="objplan.show"
        ref="form"
        :model="addPlanForm"
        label-width="130px"
        :rules="rules"
        class="formDiv"
      >
        <el-form-item label="计划看房日期:" prop="viewDate">
          <el-date-picker
            v-model="addPlanForm.viewDate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
    </myModal>
    <!--推荐租客-->
    <myModal
      :obj="objtenants"
      :disabled="recommendDisabled"
      @save="addRecommend"
      @close="clearForm"
    >
      <el-form
        ref="recommendForm"
        :model="recommendForm"
        label-width="70px"
        class="formDiv"
        :rules="rules"
      >
        <el-row :gutter="32">
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="租金:" prop="rent">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="recommendForm.rent"
                  type="number"
                  placeholder="请输入"
                >
                  <i slot="suffix">澳币</i>
                </el-input>
                <dfn class="opdfn"> /周</dfn>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="押金:" prop="deposit">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="recommendForm.deposit"
                  type="number"
                  placeholder="请输入"
                >
                  <i slot="suffix">澳币</i>
                </el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="起租日:" prop="beginDate">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-date-picker
                  v-model="recommendForm.beginDate"
                  type="date"
                  placeholder="请选择"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="截止日:" prop="endDate">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-date-picker
                  v-model="recommendForm.endDate"
                  type="date"
                  placeholder="请选择"
                  style="width: 100%"
                  :picker-options="endDateOptions"
                />
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :lg="8">
            <el-form-item label="租期:" prop="leaseTerm">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="recommendForm.leaseTerm"
                  type="text"
                  placeholder="请输入(月)"
                />
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-form-item label="租客:" label-width="85px" :required="true">
            <div
              v-for="(item, index) in formArr"
              :key="index"
              class="fromDivArr"
            >
              <el-col :xs="8" :sm="6" :md="4" :lg="3" class="agg">
                <el-input
                  v-model="item.name"
                  type="text"
                  placeholder="输入姓名"
                />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="3" class="agg">
                <el-select
                  v-model="item.gender"
                  placeholder="性别"
                  class="btnScr"
                >
                  <el-option
                    v-for="it in options"
                    :key="it.value"
                    :label="it.label"
                    :value="it.value"
                  />
                </el-select>
              </el-col>
              <el-col :xs="24" :sm="4" :lg="3" class="agg">
                <el-input
                  v-model="item.country"
                  type="text"
                  placeholder="国籍"
                />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="3" class="agg">
                <el-input v-model="item.work" type="text" placeholder="工作" />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="4" class="agg">
                <el-input
                  v-model="item.income"
                  type="text"
                  placeholder="收入"
                  @blur="checkPos"
                />
              </el-col>
              <el-col :xs="24" :sm="4" :lg="3" class="agg">
                <el-input
                  v-model="item.age"
                  type="number"
                  placeholder="年龄"
                  @blur="checkPos"
                />
              </el-col>
              <el-col
                v-if="index == 0"
                :xs="24"
                :sm="3"
                :lg="3"
                class="agg addAgg"
              >
                <span @click="addDct">添加租客</span>
              </el-col>
              <el-col
                v-if="index > 0"
                :xs="24"
                :sm="3"
                :lg="3"
                class="agg addAgg"
              >
                <span @click="delDct(index)">删除</span>
              </el-col>
            </div>
          </el-form-item>
        </el-row>
        <el-row :gutter="32">
          <el-form-item label="备注:" label-width="85px">
            <el-col :xs="24" :sm="24" :lg="20" class="agg">
              <el-input
                v-model="recommendForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="32">
          <el-form-item label="附件资料:" label-width="85px">
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <Upload
                :id="id"
                ref="upload"
                :maxcount="5"
                format="jpg,png,jpeg,pdf"
                tip="支持上传：PDF、图片(jpg / png / jpeg)"
                @getImage="getAdImage"
              />
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
    </myModal>
    <!--看房结果-->
    <myModal
      :obj="objInSpection"
      :disabled="resultDisabled"
      @save="addResult"
      @close="clearForm"
    >
      <el-form
        v-if="objInSpection.show"
        ref="form"
        :rules="rules"
        :model="resultForm"
        label-width="70px"
        class="formDiv"
      >
        <el-row :gutter="32">
          <el-form-item label="看房结果:" prop="remark" label-width="85px">
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <el-input
                v-model="resultForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请简要说明看房情况（该结果将发送给业主)"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="32">
          <el-form-item label="附件资料:" label-width="85px">
            <el-col :xs="24" :sm="24" :lg="24" class="agg">
              <Upload
                ref="upload"
                :maxcount="5"
                tip="支持上传：PDF、视频(mp4)、图片(jpg / png / jpeg)"
                format="mp4,jpg,png,jpeg,pdf"
                @getImage="getAdImage"
              />
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
    </myModal>
  </div>
</template>
<script>
import myModal from "@/components/Modal";
import TableForm from "../tableForm.vue";
import {
  leaseStep2AddPlan,
  leaseStep2Recommend,
  leaseStep2Result,
  leaseDetail,
  leaseStep2RenterSecondConfirm,
  leaseStep2cancelPlan,
  leaseStep2RenterCancel,
  leaseStep2OwnerAgree,
  leaseStep2OwnerCancel,
  leaseStep2OwnerRefused,
  leaseStep2Ctrl,
  edit,
} from "@/api/lease/";
import Upload from "@/components/Upload/SingleImage5";
import { getFileList, dateFormat2, diffDates } from "@/utils/common";

export default {
  components: {
    myModal,
    TableForm,
    Upload,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isDisabled: false,
      disabled: true,
      recommendDisabled: true,
      resultDisabled: true,
      viewDateDisabled: false,
      rules: {
        rent: [{ required: true, message: "租金不能为空" }],
        beginDate: [{ required: true, message: "起租日不能为空" }],
        viewDate: [{ required: true, message: "日期不能为空" }],
        remark: [{ required: true, message: "看房结果不能为空" }],
      },
      numTxt: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
      genderTxt: {
        MALE: "男",
        FEMALE: "女",
      },
      statusTxt: [
        "待业主确认",
        "业主拒绝",
        "待租客二次确认",
        "租客取消",
        "业主取消",
        "双方达成出租协议",
      ],
      timeList: {},
      step2Form: {
        stepName: "待推荐租客",
        id: this.id,
      },
      addPlanForm: {
        processId: "",
        viewDate: "",
      },
      recommendForm: {
        rent: "",
        deposit: "",
        beginDate: "",
        endDate: "",
        leaseTerm: "",
        remark: "",
        renterList: [],
        filePath: "",
        processId: "",
      },
      resultForm: {
        filePath: "",
        remark: "",
        processId: "",
      },
      formArr: [
        { name: "", gender: "", country: "", work: "", income: "", age: "" },
      ],
      options: [
        {
          value: "MALE",
          label: "男",
        },
        {
          value: "FEMALE",
          label: "女",
        },
      ],
      value: "",
      textarea: "",
      recommendHistoryList: [],
      objplan: {
        show: false,
        title: "添加看房计划",
        width: "647px",
      },
      objtenants: {
        show: false,
        title: "推荐租客",
        width: "900px",
      },
      objInSpection: {
        show: false,
        title: "添加看房结果",
        width: "647px",
      },
      detailRes: {
        jumpList: [],
      },
      endDateOptions: {
        disabledDate: (time) => {
          return this.recommendForm.beginDate >= time.getTime();
        },
      },
    };
  },
  computed: {
    dateFormat2: () => dateFormat2,
    getFileList: () => getFileList,
    diffDates: () => diffDates,
    jumpReason() {
      if (!this.detailRes.jumpList) return "";
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 2;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    // addPlanForm: {
    //   handler(newVal, oldVal) {
    //     var time = new Date()
    //     if (newVal.viewDate > time) {
    //       this.viewDateDisabled = false
    //     } else {
    //       this.viewDateDisabled = true
    //     }
    //   },
    //   deep: true
    // },
    resultForm: {
      handler(newVal, oldVal) {
        if (newVal.remark) {
          this.resultDisabled = false;
        } else {
          this.resultDisabled = true;
        }
      },
      deep: true,
    },
    recommendForm: {
      handler(newVal, oldVal) {
        var itemIsEmpty = false;
        var { rent, beginDate, endDate } = this.recommendForm;
        this.formArr.forEach((item, index) => {
          if (
            Object.values(item).find((it) => it === "") === "" ||
            !this.formArr.length
          ) {
            itemIsEmpty = true;
          }
        });
        this.recommendForm.renterList = this.formArr;
        if (
          itemIsEmpty ||
          !rent ||
          !beginDate ||
          diffDates(beginDate, endDate) <= 0
        ) {
          this.recommendDisabled = true;
        } else {
          this.recommendDisabled = false;
        }
      },
      deep: true,
    },
    formArr: {
      handler(n, o) {
        this.recommendForm.renterList = n;
      },
      deep: true,
    },
  },
  created() {
    this.getLeaseDetail();
    this.recommendForm.processId = this.id;
    this.resultForm.processId = this.id;
    this.addPlanForm.processId = this.id;
  },
  methods: {
    async saveEdit() {
      var res = await edit({ id: this.id, stepName: "待推荐租客" });
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isDisabled = false;
      }
    },
    async getLeaseDetail() {
      var leaseRes = await leaseDetail(this.id);
      this.detailRes = leaseRes.data;
      this.recommendHistoryList = leaseRes.data.recommendHistoryList;
      this.recommendHistoryList.forEach((item, index) => {
        if (item.status === 5) {
          this.disabled = false;
        }
      });
    },
    openDialog(obj) {
      if (!this.isEdit || this.isDisabled) {
        obj.show = true;
      } else {
        obj.show = false;
      }
    },
    async addRecommend() {
      this.recommendForm.renterList = this.formArr;
      this.$refs["recommendForm"].validate(async (valid) => {
        if (valid) {
          var recommendRes = await leaseStep2Recommend(this.recommendForm);
          if (recommendRes.code === 200) {
            this.clearForm();
            this.objtenants.show = false;
            console.log(this);
            this.getLeaseDetail();
          }
        }
      });
    },
    clearForm() {
      if (this.objtenants.show) {
        this.$refs["recommendForm"].resetFields();
      }
      this.formArr = [
        { name: "", gender: "", country: "", work: "", income: "", age: "" },
      ];
      this.addPlanForm.viewDate = "";
      this.resultForm.remark = "";

      if (this.$refs["upload"]) {
        this.$refs["upload"].rmAll();
      }
    },
    async addPlan() {
      await leaseStep2AddPlan(this.addPlanForm);
      this.getLeaseDetail();
      this.clearForm();
      this.objplan.show = false;
    },
    async cancelPlan(item) {
      if (
        item.planStatus === 0 ||
        item.viewDate < new Date().getTime() - 3600000 * 24
      ) {
        return;
      }
      await leaseStep2cancelPlan(item.id);
      this.getLeaseDetail();
    },
    async addResult() {
      await leaseStep2Result(this.resultForm);
      this.getLeaseDetail();
      this.clearForm();
      this.objInSpection.show = false;
    },
    getAdImage(img) {
      if (this.objInSpection.show) {
        this.resultForm.filePath = img;
      } else {
        this.recommendForm.filePath = img;
      }
    },
    async leaseStep2OwnerAgree(id) {
      await leaseStep2OwnerAgree(id);
      this.getLeaseDetail();
    },
    async leaseStep2OwnerRefused(id) {
      await leaseStep2OwnerRefused(id);
      this.getLeaseDetail();
    },
    async leaseStep2OwnerCancel(id) {
      await leaseStep2OwnerCancel(id);
      this.getLeaseDetail();
    },
    async leaseStep2RenterCancel(id) {
      await leaseStep2RenterCancel(id);
      this.getLeaseDetail();
    },
    async leaseStep2RenterSecondConfirm(id) {
      var res = await leaseStep2RenterSecondConfirm(id);
      if (res.code === 200) {
        this.disabled = false;
      }
      this.getLeaseDetail();
    },
    async step2Ctrl() {
      await leaseStep2Ctrl({ id: this.id });
      this.$emit("next");
    },
    delDct(par) {
      this.formArr.splice(par, 1);
    },
    addDct() {
      this.formArr.push({
        name: "",
        gender: "",
        country: "",
        work: "",
        income: "",
        age: "",
      });
    },
    jump() {
      this.$emit("jump", this.step2Form);
    },
    checkPos(e) {
      if (e.target.value <= 0) {
        this.$message.error("年龄和收入需为正整数");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.countFsColor {
  cursor: pointer;
}
.mpdalBody p {
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
.myBnt {
  color: #5ac6b7;
  display: block;
  width: 100px;
  margin-left: 115px;
  margin-bottom: 20px;
  border: 0;
}
.divUl {
  margin: 0px auto 0 auto;
}
h5,
p {
  padding: 0;
  margin: 0;
}
.ulMy {
  flex-wrap: wrap;
  width: 166px;
  padding-left: 10px;
}
.ulMy li {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  height: 40px;
  line-height: 40px;
}
.ulMy li i {
  color: #6a6a6a;
  font-size: 13px;
  align-self: self-start;
  margin-top: 23px;
}
.ulMy li p {
  color: #6a6a6a;
  font-size: 13px;
}
.ulMy li h5 {
  font-size: 16px;
  color: #151515;
  margin-bottom: 10px;
}
.ulMy li div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
}
.ulMy li em {
  color: #5ac6b7;
  margin-left: 3px;
}
.ulMy li dfn {
  color: #5ac6b7;
  margin-top: 3px;
  font-size: 12px;
  display: block;
  margin-top: 10px;
}
.ulMy li.not {
  color: #ccc;
}
.ulMy li.not h5 {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 10px;
}
.ulMy li.not div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
}
.ulMy li.not p {
  color: #ccc;
}
.overview-content {
  min-height: calc(100vh - 160px);
  background: #eee;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.limit-text {
  width: 100px;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
  overflow: hidden;
}
.divSE {
  text-align: center;
}
.divSE em {
  display: block;
}
.fileWD {
  font-size: 46px;
  color: #5ac6b7;
}
.titleDiv {
  background: #5ac6b7;
  padding-left: 20px;
  color: #fff;
  height: 60px;
  line-height: 60px;
}
.two {
  margin: 10px 0;
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;
}
.overview-tabs {
  background: #6a6a6a !important;
}
.inputTop {
  display: flex;
  justify-content: space-between;
}
.el-upload__tip {
  display: inline-block;
}
.formdiv {
  width: calc(100% - 200px);
}
.p1 {
  font-size: 12px;
  color: #d0d0d0;
}
.addBntLease p {
  display: inline-block;
  width: 68px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #5ac6b7;
  cursor: pointer;
  border: 1px solid #5ac6b7;
  border-radius: 3px;
  font-size: 14px;
  margin-right: 10px;
}
.ulLeaseBnt {
  width: 670px;
}
.ulLeaseBnt li {
  background: #f8fbfa;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  flex-wrap: wrap;
}
.ulLeaseBnt li div.left {
  color: #666;
  width: 120px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: none;
}
.ulLeaseBnt li div.left p {
  margin-bottom: 10px;
}
.ulLeaseBnt li div.left p:nth-child(1) {
  color: #5ac6b7;
  font-size: 13px;
}
.ulLeaseBnt li div.right p i {
  display: block;
  margin-bottom: 8px;
}
.ulLeaseBnt li div.right dfn {
  display: block;
  color: #5ac6b7;
}
.ulLeaseBnt li div.line {
  border-top: 1px solid #f0f0f0;
  width: 100%;
  margin-top: 13px;
  padding-top: 22px;
  box-sizing: border-box;
}
.ulLeaseBnt li div.line dfn {
  margin-right: 10px;
  color: #5ac6b7;
  cursor: pointer;
}
.ulLeaseBnt li:last-child {
  margin-bottom: 20px;
}
.ulLeaseBnt li:last-child {
  margin-bottom: 20px;
}
.ulLeaseBnt li div div {
  display: flex;
  flex-direction: column;
}

.opdfn {
  position: absolute;
  right: -23px;
  top: 0px;
  z-index: 99;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.addAgg {
  color: #5ac6b7;
}
.fromDivArr {
  margin-bottom: 10px;
  overflow: hidden;
}
.divZk {
  margin-bottom: 20px;
}
.divZk ul li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.divZk ul li {
  color: #101010;
  font-size: 12px;
  width: 100%;
}
.divZk ul li i {
  color: #b3b3b3;
  width: 50px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.divZk ul li p {
  width: 33.3%;
  text-align: left;
}
.divZk ul.auto li {
  width: auto;
}
.divZk ul.auto li {
  flex-wrap: wrap;
}
.divZk ul.auto li p {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.divZk ul.auto li p em {
  margin-right: 20px;
}
.divZk ul li span {
  color: #5ac6b7;
}
.pAll {
  font-size: 12px;
  color: #5ac6b7;
}
.pAll span {
  margin-right: 15px;
}
.pAll span i {
  margin-left: 15px;
}
.time {
  float: left;
}
.gray {
  color: gray !important;
  cursor: not-allowed !important;
}
.div_lookTime {
  color: #666;
  width: 120px;
  text-align: left;
}
.div_lookTime :first {
  text-align: right;
}
.div_lookTime p {
  color: #5ac6b7;
}
.div_Result {
  display: flex;
  width: 100%;
}
.div_tj {
  display: contents;
}
.status-box {
  display: flex;
  .right {
    flex-direction: column;
  }
}
.plan_box {
  flex-direction: row !important;
}
.line_dfn {
  margin-left: 120px;
}
.gray_line {
  color: gray !important;
  border: 1px solid gray !important;
  cursor: not-allowed !important;
}
.form-body {
  display: flex;
  .jump-box {
    width: 400px;
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
.space {
  padding: 0 10px;
  display: inline-block !important;
}
</style>
